<div class="row">
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading" data-translate="">transfertPrivs</div>
      <div class="panel-body">
        <label data-translate="">chooseSourceEditor</label>
        <select class="form-control" data-ng-model="editorsSelectedId"
                autofocus="" data-ng-change="selectUser(editorsSelectedId)">
          <option data-ng-repeat="e in editors | orderBy:'name'" value="{{e.id}}">{{e.name}}
            ({{e.records}} {{'records' | translate}})
          </option>
        </select>
        <table class="table" data-ng-hide="editorsSelectedId == null">
          <tr>
            <th data-translate="">sourceGroup</th>
            <th data-translate="">targetGroup</th>
          </tr>
          <tr data-ng-repeat="(key, g) in editorGroups"
              data-ng-init="transfertList[g.id] = {sourceGroup: g.id};">
            <td>{{g.label[lang]|empty:g.name}}</td>
            <!--TODO: Only list group with records. -->
            <td><select class="form-control"
                        data-ng-model="transfertList[g.id].targetGroup"
                        data-ng-options="g.userName group by g.groupNameTranslated
                        for (key, g) in userGroups">
            </select></td>
            <td>
              <button type="button" class="btn btn-primary btn-block"
                      data-gn-click-and-spin="tranferOwnership(g.id)"
                      data-ng-disabled="!transfertList[g.id].targetGroup">
                <span data-translate="">transfertPriv</span>
              </button>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>